<template>
  <div class="home">
    <el-container>
      <el-header>
        <div>
          课程管理系统
          <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
          <el-dropdown trigger="click" @command="fn">
            <span class="el-dropdown-link">
              {{ $store.state.user.info.username }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>


      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-row class="tac">
            <el-col :span="6">
              <el-menu router default-active="/index" class="el-menu-vertical-demo" background-color="#545c64"
                text-color="#fff" active-text-color="#ffd04b">
                <el-menu-item :index="item.path" v-for="item in list" :key="item.path">
                  <i class="el-icon-menu"></i>
                  <span slot="title">{{ item.meta.title }}</span>
                </el-menu-item>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>

        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>

      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

<script>
import { logout } from '@/api/user'
export default {
  name: 'HomeView',
  data() {
    return {
      list: []
    }
  },
  methods: {
    fn(c) {
      console.log(c);
      if (c === "logout") {
        logout()
        this.$store.commit("user/updateInfo", {})
        this.$router.push("/login");
      }

    },
    getList() {
      // 全局路由对象 是可以找到所有路由信息的
      //通过路由信息来渲染左侧菜单栏
      const list = this.$router.options.routes.find(item => item.path == "/home").children
      //获取用户的权限(vuex)
      console.log(this.$store.state.user.info.group);
      let group = this.$store.state.user.info.group

      //权限组 +动态路由
      this.list = list.filter(item => group.indexOf(item.meta.permission) != -1 || !item.meta.permission)
    }
  },


  mounted() {
    this.getList()

  }
}
</script>
<style scoped lang="scss">
.el-header,
.el-footer {
  background-color: #545C64;
  color: #ffffff;
  // text-align: center;
  line-height: 60px;
}

.el-footer {
  background-color: #888888;

}

.el-container {
  height: 100%;
}

.el-aside {
  background-color: #545C64;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  height: calc(100% - 120px);
}

.home {
  height: 100%;
}

.el-menu {
  border-right: none;
}

body>.el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-dropdown {
  color: white;
}
</style>